<template>
  <div class="padding20">
    <div class="section-container ctrl-wrap">
      <div class="ctrl-title">数加控制台</div>
      <ul>
        <li>公告：</li>
        <li><a class="text-link">[08-30] <span>9月5日大数据开发套件是升级通知2</span></a></li>
        <li><a class="text-link">[08-29] <span>9月5日大数据开发套件是升级通知1</span></a></li>
      </ul>
    </div>
    <div class="ctrl-container">
      <div class="ctrl-left">
        <div class="section-container mar-top20">
          <div class="info-left">
            <p class="info-title">组织信息</p>
            <p class="info-list">管理员：4428346@qq.com</p>
            <p class="info-list">成员数：1人 <a class="text-link">成员管理</a></p>
            <div class="info-bottom">
              <a id="copyUrl" href="https://signin.aliyun.com/1004804856817213/login.htm?callback=https%3A%2F%2Fsso.shuju.aliyun.com%2Faliyun%2FaliyunCallback%3Fredirect%3Dhttps%253A%252F%252Fdata.aliyun.com%252Fconsole" class="text-link">RAM用户登录链接</a>
              <a id="btnCopyLink" data-clipboard-text="https://signin.aliyun.com/1004804856817213/login.htm?callback=https%3A%2F%2Fsso.shuju.aliyun.com%2Faliyun%2FaliyunCallback%3Fredirect%3Dhttps%253A%252F%252Fdata.aliyun.com%252Fconsole">复制</a>
              <a class="text-link fr">个人信息</a>
            </div>
          </div><div class="info-left">
            <p class="info-title">使用信息</p>
            <p class="info-list"><span class="font-size24">2</span>产品在使用中</p>
            <p class="info-list">带续费：0个 付费产品：0个 公测中：2个</p>
            <div class="info-bottom">
              <a class="text-link">云栖社区</a>
              <a class="text-link fr">文档</a>
            </div>
          </div>
        </div>
        <div class="section-container mar-top20">
          <Tabs value="name1">
            <TabPane label="我的资源" name="name1">
              <p>已开通的公测服务</p>

            </TabPane>
            <TabPane label="未开通的产品" name="name2"></TabPane>
          </Tabs>
        </div>
      </div>
      <div class="ctrl-right">
        <div class="section-container">
          <p class="info-title">新手指导</p>
          <ul>
            <li><a class="text-link">大数据计算MaxCompute新手必看</a></li>
            <li><a class="text-link">大数据计算MaxCompute新手必看</a></li>
            <li><a class="text-link">大数据计算MaxCompute新手必看</a></li>
            <li><a class="text-link">大数据计算MaxCompute新手必看</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Clipboard from 'clipboard'
  import tooltip from '../assets/scripts/tooltips'
  import $ from 'jquery'
  // 引入静态资源
  require('../assets/styles/tooltips.css')
  export default {
    name: 'HelloMobike',
    data () {
      return {
        copyDisabled: true
      }
    },
    methods: {
        copyText: function(){
        }
    },
    mounted() {
      const clipboard = new Clipboard('#btnCopyLink');
      clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        e.clearSelection();
        tooltip.init('btnCopyLink');
        tooltip.showTooltip(e.trigger, '复制成功');
      });
    }
  }
  console.log(tooltip)
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @base: #ff6579;
  .section-container {
    position: relative;
    padding: 16px 16px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  }
  .ctrl-wrap{
    padding:0;
    height:100px;
    overflow: hidden;
  }
  .ctrl-title{
    float:left;
    width:20%;
    padding-left:20px;
    font-size: 24px;
    line-height: 100px;
  }
  .ctrl-wrap li{
    float:left;
    display:block;
    margin-right:10%;
    line-height: 100px;
  }
  .ctrl-wrap li:first-child{
    margin-right:0;
  }
  .ctrl-container{
    position: relative;
  }
  .ctrl-left{
    height:100%;
    padding-right:320px;
  }
  .ctrl-right{
    position:absolute;
    right:0;
    top:0;
    width:300px;
  }
  .info-left{
    position: relative;
    width:50%;
    display: inline-block;
    padding-right:10px;
  }
  .info-title{
    font-weight: bold;
    margin-bottom:10px;
  }
  .info-bottom{
    margin-top:10px;
    padding-top:10px;
  }
  #btnCopyLink{
    position:relative;
    display: inline-block;
    padding:0 4px;
    background:#ccc;
    color:#fff;
  }
  .copy-success{
    position: absolute;
    display: block;
    width:0;
    height:0;
    transition: opacity 0.3s ease-out;
  }
  .copy-success:before{
    display: block;
    position: absolute;
    top: -50px;
    left: -14px;
    content: '\590D\5236\6210\529F';
    width: 68px;
    height: 34px;
    line-height: 36px;
    background: rgba(0, 0, 0, 0.68);
    text-align: center;
    border-radius: 5px;
  }
  .copy-success:after{
    display: block;
    position: absolute;
    top: -16px;
    left: 7px;
    width: 0;
    height: 0;
    content: '';
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.68) transparent transparent;
  }
</style>
